<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 左侧学生信息卡片 -->
      <el-col :span="6">
        <el-card class="student-card">
          <template #header>
            <div class="clearfix">
              <span>研究生培养方案管理系统</span>
            </div>
          </template>

          <div class="student-info">
            <div class="student-name">{{ studentInfo.studentName }}</div>
            <div class="student-grade">{{ studentInfo.studentNj }} 硕士研究生</div>

            <div class="info-section">
              <div class="info-label">所属学院</div>
              <div class="info-value">{{ studentInfo.studentYx }}</div>
            </div>

            <div class="info-section">
              <div class="info-label">学科</div>
              <div class="info-value">{{ studentInfo.studentZy }} </div>
<!--              ({{ studentInfo.studentYjfxm }})-->
            </div>

            <div class="info-section">
              <div class="info-label">研究方向</div>
              <div class="info-value">{{ studentInfo.studentYjfx || '不区分研究方向' }}</div>
            </div>

<!--            <div class="info-section">-->
<!--              <div class="info-label">导师</div>-->
<!--              <div class="info-value">{{ studentInfo.studentDs }}</div>-->
<!--            </div>-->

            <div class="info-section">
              <div class="info-label">学号</div>
              <div class="info-value">{{ studentInfo.studentId }}</div>
            </div>

<!--            <el-button type="primary" class="download-btn" @click="handleDownload">-->
<!--              下载培养方案-->
<!--            </el-button>-->
          </div>
        </el-card>
      </el-col>

      <!-- 右侧培养方案信息 -->
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>培养方案信息</span>
            </div>
          </template>

          <!-- 基础信息 -->
          <!-- 基础信息 -->
          <div class="section">
            <h3>基础信息</h3>
            <el-row :gutter="16">
              <el-col :span="8" :xs="12">
                <div class="info-item compact">
                  <span class="info-label">方案编号</span>
                  <span class="info-value" :title="trainingProgram.programCode">{{ trainingProgram.programCode }}</span>
                </div>
              </el-col>
              <el-col :span="8" :xs="12">
                <div class="info-item compact">
                  <span class="info-label">年级</span>
                  <span class="info-value">{{ trainingProgram.grade }}级</span>
                </div>
              </el-col>
              <el-col :span="8" :xs="12">
                <div class="info-item compact">
                  <span class="info-label">方案名称</span>
                  <span class="info-value ellipsis" :title="trainingProgram.name">{{ trainingProgram.name }}</span>
                </div>
              </el-col>
              <el-col :span="8" :xs="12">
                <div class="info-item compact">
                  <span class="info-label">培养类型</span>
                  <span class="info-value">
          <dict-tag :options="culture_program_type" :value="trainingProgram.cultureProgramType"/>
        </span>
                </div>
              </el-col>
<!--              <el-col :span="8" :xs="12">-->
<!--                <div class="info-item compact">-->
<!--                  <span class="info-label">总学分</span>-->
<!--                  <span class="info-value">{{ trainingProgram.totalCredits }}学分</span>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="8" :xs="12">-->
<!--                <div class="info-item compact">-->
<!--                  <span class="info-label">公共必修课学分</span>-->
<!--                  <span class="info-value">{{ trainingProgram.degreeCourseCredit }}学分</span>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="8" :xs="12">-->
<!--                <div class="info-item compact">-->
<!--                  <span class="info-label">专业必修课学分</span>-->
<!--                  <span class="info-value">{{ trainingProgram.requiredCourseCredits }}学分</span>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="8" :xs="12">-->
<!--                <div class="info-item compact">-->
<!--                  <span class="info-label">专业选修课学分</span>-->
<!--                  <span class="info-value">{{ trainingProgram.electiveCourseCredits }}学分</span>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="8" :xs="12">-->
<!--                <div class="info-item compact">-->
<!--                  <span class="info-label">实践环节学分</span>-->
<!--                  <span class="info-value">{{ trainingProgram.practiceCredits }}学分</span>-->
<!--                </div>-->
<!--              </el-col>-->
            </el-row>
          </div>

<!--          &lt;!&ndash; 培养方案说明 &ndash;&gt;-->
<!--          <div class="section">-->
<!--            <h3>培养方案说明</h3>-->
<!--            <div class="program-description">-->
<!--              {{ trainingProgram.limitingCondition || '本培养方案旨在培养掌握软件工程领域坚实的基础理论和宽广的专业知识，具有较强的解决实际问题的能力，能够承担专业技术或管理工作，具有良好的职业素养的高层次应用型人才。学生需在规定年限内完成所有课程学习和实践环节，达到规定学分要求，并通过学位论文答辩方可毕业。' }}-->
<!--            </div>-->
<!--          </div>-->

          <!-- 学分统计 -->
<!--          <div class="section">-->
<!--            <h3>学分统计（已选/要求）</h3>-->
<!--            <el-row :gutter="20">-->
<!--              <el-col :span="6">-->
<!--                <div class="credit-item">-->
<!--                  <div class="credit-label">公共必修课</div>-->
<!--                  <div class="credit-value">8/{{ trainingProgram.degreeCourseCredit || 8 }}</div>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="6">-->
<!--                <div class="credit-item">-->
<!--                  <div class="credit-label">专业必修课</div>-->
<!--                  <div class="credit-value">10/{{ trainingProgram.requiredCourseCredits || 10 }}</div>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="6">-->
<!--                <div class="credit-item">-->
<!--                  <div class="credit-label">专业选修课</div>-->
<!--                  <div class="credit-value">6/{{ trainingProgram.electiveCourseCredits || 8 }}</div>-->
<!--                </div>-->
<!--              </el-col>-->
<!--              <el-col :span="6">-->
<!--                <div class="credit-item">-->
<!--                  <div class="credit-label">实践环节</div>-->
<!--                  <div class="credit-value">2/{{ trainingProgram.practiceCredits || 6 }}</div>-->
<!--                </div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->

          <!-- 课程列表 -->
          <div class="section">
            <h3>课程列表</h3>
            <el-table
                :data="courseList"
                style="width: 100%"
                stripe
                v-loading="loading"
            >
              <el-table-column prop="courseName" label="课程名称" min-width="150"></el-table-column>
              <el-table-column prop="departmentId" label="开课学院" min-width="150"></el-table-column>
              <el-table-column prop="credits" label="学分" width="80"></el-table-column>
              <el-table-column prop="totalHours" label="学时" width="80"></el-table-column>
<!--              <el-table-column prop="semester" label="开课学期" width="100"></el-table-column>-->
<!--              <el-table-column prop="teachingMethod" label="授课方式" width="100"></el-table-column>-->
<!--              <el-table-column prop="examMethod" label="考核方式" width="100"></el-table-column>-->
<!--              <el-table-column prop="isRequired" label="必修/选修" width="80">-->
<!--                <template #default="scope">-->
<!--                  {{ scope.row.isRequired === 1 ? '必修' : '选修' }}-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="授课方式" align="center" prop="teachingMethod">
                <template #default="scope">
                  <dict-tag :options="teaching_method" :value="scope.row.teachingMethod"/>
                </template>
              </el-table-column>
              <el-table-column label="考试方式" align="center" prop="examMethod">
                <template #default="scope">
                  <dict-tag :options="method_examination" :value="scope.row.examMethod"/>
                </template>
              </el-table-column>
              <el-table-column label="开课学期" align="center" prop="semester">
                <template #default="scope">
                  <dict-tag :options="semester" :value="scope.row.semester" />
                </template>
              </el-table-column>
              <el-table-column label="课程性质" align="center" prop="courseCharacter">
                <template #default="scope">
                  <dict-tag :options="characteristics_of_the_course" :value="scope.row.courseCharacter"/>
                </template>
              </el-table-column>
              <el-table-column label="是否必修" align="center" prop="isRequired">
                <template #default="scope">
                  <dict-tag :options="compulsory" :value="scope.row.isRequired"/>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="StudentTrainingDetails">
import {ref, onMounted, getCurrentInstance} from 'vue'
import { getStudentTrainingDetails } from '@/api/student/studentTrainingDetails'
import { ElMessage } from 'element-plus'

// 使用 useDict 获取字典数据
// const { proxy } = getCurrentInstance()
// const { teaching_method, method_examination, semester, compulsory } = proxy.useDict(
//     'teaching_method',
//     'method_examination',
//     'semester',
//     'compulsory'
// )
const { proxy } = getCurrentInstance();
const { characteristics_of_the_course, type_of_course, semester, audit_status, course_status, status, culture_program_type, grade, teaching_method, method_examination, course_nature, compulsory } = proxy.useDict('characteristics_of_the_course', 'type_of_course', 'semester', 'audit_status', 'course_status', 'status', 'culture_program_type', 'grade', 'teaching_method', 'method_examination', 'course_nature', 'compulsory');


// 响应式数据
const studentInfo = ref({})
const trainingProgram = ref({})
const courseList = ref([])
const loading = ref(false)

// 获取培养方案详情
const getDetails = async () => {
  loading.value = true
  try {
    const response = await getStudentTrainingDetails()
    console.log('接口返回结果:', response)

    const data = response.data
    studentInfo.value = data.studentInfo || {}
    trainingProgram.value = data.trainingProgram || {}
    courseList.value = data.trainingProgramCoursesList || []
  } catch (error) {
    console.error('接口调用失败:', error)
    ElMessage.error('获取培养方案信息失败')
  } finally {
    loading.value = false
  }
}

// 处理下载培养方案
const handleDownload = () => {
  ElMessage.info('下载功能开发中')
}

// 组件挂载时获取数据
onMounted(() => {
  getDetails()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.student-card {
  .student-info {
    text-align: center;

    .student-name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .student-grade {
      color: #666;
      margin-bottom: 20px;
    }

    .info-section {
      margin-bottom: 15px;
      text-align: left;

      .info-label {
        font-size: 12px;
        color: #999;
      }

      .info-value {
        font-size: 14px;
      }
    }

    .download-btn {
      width: 100%;
      margin-top: 20px;
    }
  }
}

.section {
  margin-bottom: 30px;

  h3 {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
}

.info-item {
  margin-bottom: 15px;

  .info-label {
    display: inline-block;
    width: 100px;
    color: #666;
  }

  .info-value {
    font-weight: 500;
  }
}

.credit-item {
  text-align: center;
  padding: 15px;
  border-radius: 4px;
  background-color: #f8f9fa;

  .credit-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }

  .credit-value {
    font-size: 18px;
    font-weight: bold;
    color: #409EFF;
  }
}

.program-description {
  line-height: 1.8;
  color: #666;
}

.section {
  margin-bottom: 20px;

  h3 {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    color: #333;
  }
}

.info-item.compact {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;

  .info-label {
    min-width: 60px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .info-value {
    font-weight: 500;
    color: #333;
    font-size: 13px;
    flex: 1;
    min-width: 0; // 防止flex item溢出

    // 文字过长时显示省略号
    &.ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .info-item.compact {
    .info-label {
      min-width: 50px;
      font-size: 12px;
    }

    .info-value {
      font-size: 12px;
    }
  }
}
</style>